﻿@{
    ViewBag.Title = "List of speakers";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@Scripts.Render("~/bundles/speakers")

<!-- ko with: currentSpeaker -->
<div class="editor">
    <form name="speakerEditor">
        <h1>Speaker Detail</h1>
        <div class="field"><span>Speaker's name</span><input type="text" name="speakerName" data-bind="value: name, error: nameError" /></div>
        <div class="field"><span>Speaker's surname</span><input type="text" name="speakerSurname" data-bind="value: surname, error: surnameError" /></div>
        <div class="field"><span>Speaker's description</span><input type="text" name="speakerDescription" data-bind="value: description, error: descriptionError" /></div>
        <div class="field"><span>Speaker's age</span><input type="number" name="speakerAge" data-bind="spinner: age, error: ageError" /></div>
        <div class="buttons">
            <button data-bind="click: $root.Save">Save</button>
            <button data-bind="click: $root.Abort">Abort</button>
        </div>
    </form>
</div>
<!-- /ko -->

<!-- list -->
<div data-bind="foreach: speakers">
    <div class="speakerItem" data-bind="click: $root.Update">
        <span class="speakerName" data-bind="text: name">name</span>
        <span class="speakerSurname" data-bind="text: surname">surname</span>
        <div class="deleteSpeaker" data-bind="click: $root.Delete, clickBubble: false"></div>
    </div>
</div>
<div class="speakerItemAdd" data-bind="click: Edit">
    <span>Add Speaker</span>
</div>

@section scripts {
    <script type="text/javascript">
        $(function () {            
            speakerResources.setLanguage('@Request.UserLanguages[0]');
        });
    </script>
}

@section actionBar {
    <form name="speakerSearch" class="searchForm">
        <input name="nameOrSurname" type="text" placeholder="Name or surname" data-bind="value: NameOrSurnameFilter" />
        <button data-bind="click: Load" class="searchButton" />
    </form>
}